<template>
  <view class="itemBox2">
    <view class="left">
      <image :src="item.tempurl" mode="aspectFit" />
      <view class="mask">
        <view class="icon" @click="editPic">
          <uni-icons type="compose" size="20" color="#fff"></uni-icons>
        </view>
        <view class="icon" @click="delImg(item)">
          <uni-icons type="trash" size="20" color="#fff"></uni-icons>
        </view>
      </view>
    </view>
    <view class="right">
      <view class="row" v-if="showClassid">
        <view class="label">所属分类</view>
        <uni-data-select
          placeholder="请选择分类"
          style="width: 200px"
          ref="selectRef"
          collection="dc-bizhi-classify"
          field="_id as value, name as text ,sort"
          :where="`enable==true`"
          orderby="sort asc"
          :clear="false"
          v-model="classify"
          @change="handleClassifyChange"
        ></uni-data-select>
      </view>
      <view class="row">
        <view class="label">图片描述</view>
        <uni-easyinput
          placeholder="请输入图片描述"
          :value="item.description"
          type="textarea"
          @input="descriptionChange"
        />
      </view>
      <view class="row">
        <view class="label">评分</view>
        <uni-rate
          :touchable="false"
          allow-half
          :size="30"
          :value="item.score"
          @change="scoreChange"
        />
      </view>
      <view class="row">
        <view class="label">标签</view>
        <uni-easyinput
          placeholder="请输入标签名并回车"
          v-model="iptValue"
          @confirm="tabConfirm"
        />
        <view class="tabGroup">
          <view
            class="tab"
            @click="delTab(idx)"
            v-for="(tab, idx) in item.tabs"
            :key="idx"
            >{{ tab }}</view
          >
        </view>
      </view>
      <view class="row inline">
        <view class="label">是否展现</view>
        <switch
          style="transform: scale(0.6); transform-origin: left"
          :checked="item.checked"
          @change="checkedChange"
        />
      </view>
    </view>
  </view>
  <cropper-image
    ref="cropperImageRef"
    :src="item.tempurl"
    @save="handleSavePic"
  />
</template>

<script setup>
import { ref,  } from 'vue';
import cropperImage from '@/components/cropper-image/cropper-image.vue';

const props = defineProps({
  item: {
    type: Object,
    default: () => {},
  },
  showClassid:{
    type:Boolean,
    default:false
  }
});
const params = ref({
  total: 0,
  currentPage: 1,
  pageSize: 5,
  viewSort: '',
  downloadSort: '',
  classid: '',
});
const classify = ref(props.item.classid);

const iptValue = ref('');
const cropperImageRef = ref(null);

const emits = defineEmits(['update:item']);
const checkedChange = (e) => {
  emits('update:item', { ...props.item, checked: e.detail.value });
};
const scoreChange = (e) => {
  emits('update:item', { ...props.item, score: e.value.toString() });
};
const descriptionChange = (e) => {
  emits('update:item', { ...props.item, description: e });
};
const tabConfirm = () => {
  emits('update:item', {
    ...props.item,
    tabs: [...props.item.tabs, iptValue.value],
  });
  iptValue.value = '';
};
const delTab = (idx) => {
  const tabs = [...props.item.tabs]; // 做浅拷贝,避免直接修改props.item.tabs
  tabs.splice(idx, 1);
  emits('update:item', { ...props.item, tabs });
};

const editPic = () => {
  cropperImageRef.value.open();
};
const handleSavePic = (url) => {
  emits('update:item', { ...props.item, tempurl: url });
};

const handleClassifyChange = (e) => {
  emits('update:item', { ...props.item, classid: e });

};



</script>

<style scoped lang="less">
.itemBox2 {
  // background-color: #f8f8f8;
  width: 100%;
  min-height: 300px;
  border: 1px solid transparent;
  display: flex;
  align-items: start;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  .close {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background-color: red;
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
  }

  .left {
    width: 150px;
    aspect-ratio: 9/20;
    position: relative;
    background: conic-gradient(
      #ccc 0 25%,
      #fff 25% 50%,
      #ccc 50% 75%,
      #fff 75% 100%
    );
    background-size: 10px 10px;
    image {
      width: 100%;
      height: 100%;
    }
    .mask {
      background-color: rgba(0, 0, 0, 0.4);
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .icon {
        border-radius: 50%;
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
    }
  }
  .right {
    flex: 1;
    margin-left: 20px;
    color: #666;
    .row {
      margin-bottom: 20px;
      .label {
        font-size: 14px;
        margin-bottom: 6px;
      }
      .tabGroup {
        padding-top: 6px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        .tab {
          border: 1px solid #1a73e8;
          border-radius: 100px;
          color: #1a73e8;
          padding: 2px 6px;
          font-size: 12px;
          cursor: pointer;
        }
        .tab:hover {
          text-decoration: line-through;
        }
      }
    }
    .inline {
      display: flex;
      align-items: center;
      gap: 10px;
      .label {
        margin-bottom: 0;
      }
    }
  }
}
.itemBox2.add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  cursor: pointer;
  .icon {
    font-size: 50px;
  }
  .text {
    font-size: 20px;
    padding-top: 20px;
  }
}
</style>
